<script setup>
import { ref , reactive , watch , getCurrentInstance ,computed} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { useGetFriendAndGroupApply , useGetNewDynamicCount} from "@/hooks/footer-hook";

const store = useStore();
const router = useRouter();
const notifyCount = ref(0);
const dynamicCount = ref(0);
const nowChats =  store.state.notify.nowChats;
const user = store.state.user.userInfo;
const dynamic = store.state.dynamic;
const app = getCurrentInstance().appContext.app;
const unRead = ref(0);

let _unRead = computed(() => {
     unRead.value = store.state.notify.nowChats.reduce((prev,item) => prev + (item.messages.filter(item => !item.readStatus)).length,0);
     return unRead;
});

(async () => {
  notifyCount.value = await useGetFriendAndGroupApply(app,store,user._id);
  dynamicCount.value = await useGetNewDynamicCount(store,user._id);
})();


</script>
<template> 
  <div class="footer">
    <van-tabbar route>
      <van-tabbar-item replace to="/message" icon="chat" :badge="_unRead > 0 ? _unRead : unRead > 0? unRead : ''">
        消息
      </van-tabbar-item>
      <van-tabbar-item
        replace
        to="/contacts"
        icon="manager"
        :badge="notifyCount > 0 ? notifyCount : ''"
        >联系人</van-tabbar-item
      >
      <van-tabbar-item
        replace
        to="/dynamic"
        icon="star"
        :badge="dynamic.newDynamicCount > 0 ? dynamic.newDynamicCount : ''"
        >动态</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
